<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.3/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">

	</head>

    
	<body>
		<div class="layui-btn-container">
            <button class="layui-btn" id="demo100">
              无限层级 + 跳转 + 事件 + 自定义模板
            </button>
        </div>

          <script src="https://www.layuicdn.com/layui-v2.6.3/layui.js"></script>

          <script>
            layui.use(['dropdown', 'util', 'layer', 'table'], function(){
              var dropdown = layui.dropdown
              ,util = layui.util
              ,layer = layui.layer
              ,table = layui.table
              ,$ = layui.jquery;
              
        
              
              //初演示 - 绑定输入框
              dropdown.render({
                elem: '#demo2'
                ,data: [{
                  title: 'menu item 1'
                  ,id: 101
                },{
                  title: 'menu item 2'
                  ,id: 102
                },{
                  title: 'menu item 3'
                  ,id: 103
                },{
                  title: 'menu item 4'
                  ,id: 104
                },{
                  title: 'menu item 5'
                  ,id: 105
                },{
                  title: 'menu item 6'
                  ,id: 106
                }]
                ,click: function(obj){
                  this.elem.val(obj.title);
                }
                ,style: 'width: 235px;'
              });
              
              //初演示 - 绑定文字
              dropdown.render({
                elem: '#demo3'
                ,data: [{
                  title: 'menu item 1'
                  ,id: 100
                },{
                  title: 'menu item 2'
                  ,id: 101
                  ,child: [{  //横向子菜单
                    title: 'menu item 2-1'
                    ,id: 1011
                  },{
                    title: 'menu item 2-2'
                    ,id: 1012
                  }]
                },{
                  title: 'menu item 3'
                  ,id: 102
                },{
                  type: '-' //分割线
                },{
                  title: 'menu group'
                  ,id: 103
                  ,type: 'group' //纵向菜单组
                  ,child: [{
                    title: 'menu item 4-1'
                    ,id: 1031
                  },{
                    title: 'menu item 4-2'
                    ,id: 1032
                  }]
                },{
                  type: '-' //分割线
                },{
                  title: 'menu item 5'
                  ,id: 104
                },{
                  title: 'menu item 5'
                  ,id: 104
                }]
                ,click: function(obj){
                  this.elem.val(obj.title);
                }
              });
              
              //高级演示 - 各种组合
              dropdown.render({
                elem: '#demo100'
                ,data: [{
                  title: 'menu item 1'
                  ,templet: '<i class="layui-icon layui-icon-picture"></i> {{d.title}} <span class="layui-badge-dot"></span>'
                  ,id: 100
                  ,href: '#'
                },{
                  title: 'menu item 2'
                  ,templet: '<img src="http://cdn.layui.com/avatar/168.jpg?t=123" style="width: 16px;"> {{d.title}}'
                  ,id: 101
                  ,href: '/'
                  ,target: '_blank'
                }
                ,{type: '-'} //分割线
                ,{
                  title: 'menu item 3'
                  ,id: 102
                  ,type: 'group'
                  ,child: [{
                    title: 'menu item 3-1'
                    ,id: 103
                  },{
                    title: 'menu item 3-2'
                    ,id: 104
                    ,child: [{
                      title: 'menu item 3-2-1'
                      ,id: 105
                    },{
                      title: 'menu item 3-2-2'
                      ,id: 11
                      ,type: 'group'
                      ,child: [{
                        title: 'menu item 3-2-2-1'
                        ,id: 111
                      },{
                        title: 'menu item 3-2-2-2'
                        ,id: 1111
                      }]
                    },{
                      title: 'menu item 3-2-3'
                      ,id: 11111
                    }]
                  },{
                    title: 'menu item 3-3'
                    ,id: 111111
                    ,type: 'group'
                    ,child: [{
                      title: 'menu item 3-3-1'
                      ,id: 22
                    },{
                      title: 'menu item 3-3-2'
                      ,id: 222
                      ,child: [{
                        title: 'menu item 3-3-2-1'
                        ,id: 2222
                      },{
                        title: 'menu item 3-3-2-2'
                        ,id: 22222
                      },{
                        title: 'menu item 3-3-2-3'
                        ,id: 2222222
                      }]
                    },{
                      title: 'menu item 3-3-3'
                      ,id: 333
                    }]
                  }]
                }
                ,{type: '-'}
                ,{
                  title: 'menu item 4'
                  ,id: 4
                },{
                  title: 'menu item 5'
                  ,id: 5
                  ,child: [{
                    title: 'menu item 5-1'
                    ,id: 55
                    ,child: [{
                      title: 'menu item 5-1-1'
                      ,id: 5555
                    },{
                      title: 'menu item 5-1-2'
                      ,id: 55555
                    },{
                      title: 'menu item 5-1-3'
                      ,id: 555555
                    }]
                  },{
                    title: 'menu item 5-2'
                    ,id: 52
                  },{
                    title: 'menu item 5-3'
                    ,id: 53
                  }]
                },{type:'-'},{
                  title: 'menu item 6'
                  ,id: 66
                  ,type: 'group'
                  ,isSpreadItem: false
                  ,child: [{
                    title: 'menu item 6-1'
                    ,id: 666
                  },{
                    title: 'menu item 6-2'
                    ,id: 6666
                  },{
                    title: 'menu item 6-3'
                    ,id: 66666
                  }]
                }]
                ,click: function(item){
                  layer.msg(util.escape(JSON.stringify(item)));
                }
              });
            });
        </script>
	</body>

</html>
